

$(function() {
    // io-client
    // 连接成功会触发服务器端的connection事件
    var socket = io(); 
    // var url=decodeURI(location.href).split('?')[1];
    // var uname=url.split('=')[1];
    let uname=''
    $.ajax({
      method:'GET',
      url:'http://127.0.0.1:5050/user/sessiondata',
      xhrFields: {
          withCredentials: true
      },
      crossDomain: true,
      success:function(data)
      {
          
          uname=data.uname;
          isLogin=data.isLogin;



        if(isLogin)
        {
         
          var imgN = Math.floor(Math.random()*6)+1; // 随机分配头像
          socket.emit('login', { 
            name:uname,
            img: 'images/chat/user' + imgN + '.jpg'
          });  // 触发登录事件
      
      
          socket.on('system', (user)=> { 
            var data = new Date().toTimeString().substr(0, 8);
            $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}  ${user.status}了聊天室<span></p>`);
            // 滚动条总是在最底部
            $('#messages').scrollTop($('#messages')[0].scrollHeight);
          });
      
          // 监听抖动事件
          socket.on('shake', (user)=> { 
            var data = new Date().toTimeString().substr(0, 8);
            $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}发送了一个窗口抖动</span></p>`);
            shake();
            // 滚动条总是在最底部
            $('#messages').scrollTop($('#messages')[0].scrollHeight);
          });
      
          // 显示在线人员
          socket.on('disUser', (usersInfo)=> {
            displayUser(usersInfo);
          });
      
          // 发送消息
          $('#sub').click(sendMsg);
          $('#m').keyup((ev)=> {
            if(ev.which == 13) {
              sendMsg();
            }
          });
      
          // 接收消息
          socket.on('receiveMsg', (obj)=> {  
            // 发送为图片
            if(obj.type == 'img') {
              $('#messages').append(`
                <li class='${obj.side}'>
                  <img src="${obj.img}">
                  <div>
                    <span>${obj.name}</span>
                    <p style="padding: 0;">${obj.msg}</p>
                  </div>
                </li>
              `); 
              $('#messages').scrollTop($('#messages')[0].scrollHeight);
              return;
            }
      
            // 提取文字中的表情加以渲染
            var msg = obj.msg;
            var content = '';
            while(msg.indexOf('[') > -1) {  // 其实更建议用正则将[]中的内容提取出来
              var start = msg.indexOf('[');
              var end = msg.indexOf(']');
           
              content += '<span>'+msg.substr(0, start)+'</span>';
              content += '<img src="images/chat/emoji/emoji ('+msg.substr(start+6, end-start-6)+').png">';
              msg = msg.substr(end+1, msg.length);
             
            }
            content += '<span>'+msg+'</span>';
            
            $('#messages').append(`
              <li class='${obj.side}'>
                <img src="${obj.img}">
                <div>
                  <span>${obj.name}</span>
                  <p style="color: ${obj.color};">${content}</p>
                </div>
              </li>
            `);
            // 滚动条总是在最底部
            $('#messages').scrollTop($('#messages')[0].scrollHeight);
          }); 
      
      
          // 发送消息
          var color = '#000000'; 
          function sendMsg() { 
            if($('#m').val() == '') {
              alert('请输入内容！');
              return false;
            }
            color = $('#color').val(); 
            socket.emit('sendMsg', {
              msg: $('#m').val(),
              color: color,
              type: 'text'
            });
            $('#m').val(''); 
            return false; 
          }
      
          var timer;
          function shake() {
            $('.chat_main').addClass('shaking');
            clearTimeout(timer);
            timer = setTimeout(()=> {
              $('.chat_main').removeClass('shaking');
            }, 500);
          }
      
          // 显示在线人员
          function displayUser(users) {
            $('#users').text(''); // 每次都要重新渲染
            if(!users.length) {
              $('.contacts p').show();
            } else {
              $('.contacts p').hide();
            }
            $('#num').text(users.length);
            for(var i = 0; i < users.length; i++) {
              var $html = `<li>
                <img src="${users[i].img}">
                <span>${users[i].name}</span>
              </li>`;
              $('#users').append($html);
            }
          }
      
          // 清空历史消息
          $('#clear').click(()=> {
            $('#messages').text('');
            
            socket.emit('disconnect');
            
          });
       
          // 渲染表情
          init();
          function init() {
            for(var i = 0; i < 141; i++) {
              $('.emoji').append('<li id='+i+'><img src="images/chat/emoji/emoji ('+(i+1)+').png"></li>');
            }
          }
      
          // 显示表情
          $('#smile').click(()=> {
            $('.selectBox').css('display', "block");
          });
          $('#smile').dblclick((ev)=> { 
            $('.selectBox').css('display', "none");
          });  
          $('#m').click(()=> {
            $('.selectBox').css('display', "none");
          }); 
      
          // 用户点击发送表情
          $('.emoji li img').click((ev)=> {
              ev = ev || window.event;
              var src = ev.target.src;
            
              var emoji = src.replace(/\D*/g, '').substr(12, 14);
           
              var old = $('#m').val();
              $('#m').val(old+'[emoji'+emoji+']');
              $('.selectBox').css('display', "none");
          });
      
          // 用户发送抖动
          $('.edit #shake').click(function() {
              socket.emit('shake');
          });
      
          // 用户发送图片
          $('#file').change(function() {
            var file = this.files[0];  // 上传单张图片
            var reader = new FileReader();
      
            //文件读取出错的时候触发
            reader.onerror = function(){
                console.log('读取文件失败，请重试！'); 
            };
            // 读取成功后
            reader.onload = function() {
              var src = reader.result;  // 读取结果
              var img = '<img class="sendImg" src="'+src+'">';
              socket.emit('sendMsg', {  // 发送
                msg: img,
                color: color,
                type: 'img'
              }); 
            };
            reader.readAsDataURL(file); // 读取为64位
          });
        }


          
        },
     
      error: function(xhr, err){
          console.log('异步session失败：')
          console.log(xhr)
          console.log(err)
        }
        
  
  })

});